<template>
  <div class="page-container page-container-detail-page">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>拼团</el-breadcrumb-item>
        <el-breadcrumb-item>开团活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 详情信息 -->
    <div class="page-container-detail">
      <p class="pageName">开团活动详情</p>
      <div class="toolbar">
        <el-form :inline="false" :model="dataForm" :size="size" ref="dataForm" class="border" >
          <div style="width: 100%;">
            <el-form-item>
              <el-image
                style="width: 100px; height: 100px"
                :src="dataForm.picUrl"></el-image>
            </el-form-item>

            <div class="form-group">
              <label  class="color999">拼团单号：</label>
              <div  class="color333">{{dataForm.grouponInstCode}}</div>
            </div>
            <div class="form-group">
              <label  class="color999">拼团活动名称：</label>
              <div  class="color333">{{dataForm.promName}}</div>
            </div>
            <div class="form-group">
              <label  class="color999">成团人数：</label>
              <div  class="color333">{{dataForm.groupMembers}}</div>
            </div>
            <div class="form-group">
              <label  class="color999">成团状态：</label>
              <div  class="color333">{{dataForm.statusName}}</div>
            </div>
            <div class="form-group">
              <label  class="color999">开团时间：</label>
              <div  class="color333">{{dataForm.launchTime}}</div>
            </div>
            <div class="form-group">
              <label  class="color999">成团时间：</label>
              <div  class="color333">{{dataForm.completedTime}}</div>
            </div>
            <el-form-item v-if="false">
              <span style="color: #999;">当前状态</span>
              <span class="color999 font18" v-if="dataForm.status == 1">待提交</span>
              <span class="color999 font18" v-else-if="dataForm.status == 2">待审核</span>
              <span class="color999 font18" v-else-if="dataForm.status == 3">未开始</span>
              <span class="color999 font18" v-else-if="dataForm.status == 4">审核不通过</span>
              <span class="color999 font18" v-else-if="dataForm.status == 5">进行中</span>
              <span class="color999 font18" v-else-if="dataForm.status == 6">已过期</span>
              <span class="color999 font18" v-else-if="dataForm.status == 7">已关闭</span>
            </el-form-item>

            <div  class="mb30" v-if ="dataForm.status ==2">
              <el-button class="searchButton" :size="size" @click="forceGroup(dataForm.id)">强制成团</el-button>
            </div>
          </div>
        </el-form>

        <el-alert :closable="false" style="background-color: #ffffff;color: #ffffff;" title="" type="success" />

        <!-- 开团信息 -->
        <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" >
          <el-table-column align="center" type="index" ></el-table-column>
          <el-table-column align="center" prop="thirdOrderCode" label="订单编号" ></el-table-column>
          <el-table-column align="center" prop="thirdUserId" label="参团用户ID" ></el-table-column>
          <el-table-column align="center" prop="receiveMember" label="收货人" ></el-table-column>
          <el-table-column align="center" prop="paymentType" label="支付方式" >
            <template slot-scope="scope">
              <span style="margin-left:10px;" v-if="scope.row.paymentType == 1">在线支付</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="cellPhone" label="联系电话"></el-table-column>
          <el-table-column align="center" prop="joinTime" label="参团时间" ></el-table-column>
          <el-table-column align="center" prop="receiveAddress" label="收货地址" ></el-table-column>
          <el-table-column align="center" prop="paymentStatusName" label="状态" ></el-table-column>
        </el-table>
      </div>
    </div>



  </div>
</template>

<script>

export default {
  name: "GrouponStartMgmDetail",
  components: {

  },

  data(){
    return {

      size: "small",
      tableData:[],
      dataForm: {
        "id":null,
        "picUrl":null,
        "status":null,
        "statusName":null,
        "promName": null,
        "groupMembers": null,
        "joinedMembers": null,
        "totalMembers":null
      },
    }
  },


  methods: {

    // 显示拼团详情
    showGrouponDetail() {
      let that = this;
      this.tableData=[];
      this.dataForm={};

      let param = {};
      param.url = "jic-market/PatchGrouponInst/detail";
      param.id = this.$route.query.id;
      this.utils.request.httpUtils(param, function (res) {
         
         
        that.tableData = res.data.detailResponseList;
        that.dataForm = res.data;
         
      });
    },

    // 显示拼团详情
    forceGroup(id) {
      let param = {};
      let this_ =this;
      param.url = "jic-market/PatchGrouponInst/forceGroup";
      param.patchGrouponInstId = id;
      this_.$confirm("该拼团单未达到成团人数，确定要强制成团？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.utils.request.httpUtils(param, function (res) {
             
             
            if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
              this_.showGrouponDetail();
            } else {
              this_.$message({ message: "操作失败", type: "error" });
            }
             
          });
        })
        .catch(() => {
        });

    },
  },

  mounted(){

    this.showGrouponDetail();
  }
}

</script>


<style scoped lang='scss'>

</style>
